<template>
    <div class="fillcontain">
        <el-form :model="formData" label-position="labelPosition" ref="formData"
                 class="demo-form-inline" style="margin-left: 10px;margin-right: 10px">
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" style="width: 200px" @change="schoolchange" v-model="formData.schoolid" placeholder="请选择校区">
                        <el-option
                            v-for="item in schoolList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" style="width: 200px" v-model="formData.eid" placeholder="请选择老师">
                        <el-option
                            v-for="item in empsList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" style="width: 200px" v-model="formData.chargeType" placeholder="全部收支">
                        <el-option
                            v-for="item in chargeTypeList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-select size="mini" style="width: 200px" v-model="formData.wayid" placeholder="全部">
                        <el-option
                            v-for="item in wayidList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-input
                        size="mini" style="width: 200px"
                        placeholder="搜索项目"
                        prefix-icon="el-icon-search"
                        v-model="formData.balanceItemname">
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-date-picker size="mini"
                                    style="width: 200px"
                                    v-model="formData.beginTime"
                                    align="right"
                                    type="date"
                                    placeholder="开始日期"
                                    value-format="timestamp"
                                    >
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="">
                    <el-date-picker size="mini"
                                    v-model="formData.endTime"
                                    style="width: 200px"
                                    align="right"
                                    type="date"
                                    placeholder="结束日期"
                                    value-format="timestamp"
                                    >
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-button type="primary" @click="this.initData" icon="el-icon-search">搜索</el-button>
        </el-form>
        <div class="table_container">
            <el-table
                :data="tableData"
                highlight-current-row
                style="width: 100%">

                <el-table-column
                    property="orderid"
                    label="单据编号"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="balanceItemname"
                    label="项目"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="comments"
                    label="备注"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="schoolname"
                    label="校区"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="ename"
                    label="老师"
                    min-width="10%">
                </el-table-column>

                <el-table-column
                    property="charge"
                    label="金额"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="balanceTypename"
                    label="费用类型"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="wayTypename"
                    label="交费方式"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="chargeTypename"
                    label="收支类型"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="createtime"
                    label="添加日期"
                    :formatter="dateFormat"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    label="操作"
                    min-width="10%">
                    <template scope="scope">
                        <el-button @click="print(scope.$index,scope.row)" type="text" size="small">打印</el-button>
                        <el-button @click="deleteCharge(scope.$index,scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="formData.pageno"
                    :page-size="20"
                    layout="total, prev, pager, next"
                    :total="count">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '../components/headTop'
    import {getUserList, getUserCount,queryOtherCharge,deleteOtherCharge} from '@/api/getData'
    import * as moment from 'moment'

    export default {
        computed: {
            ...
                mapGetters(['wayidList','schoolList','empschoolMap', 'chargeTypeList', 'balanceTypeList', 'balanceItemStatus', 'feeTypeList', 'balanceItemList', 'chargeWay'])
        },
        data() {
            return {
                empsList:[],
                formData: {
                    schoolid:'',
                    eid:'',
                    chargeType:'',
                    wayid:'',
                    balanceItemname:'',
                    beginTime:'',
                    endTime:'',
                    pageno:1,
                    pagesize:10,

                },
                tableData: [],
                currentRow: null,
                offset: 0,
                limit: 10,
                count: 0,
                currentPage: 1,
            }
        },
        components: {
            headTop,
        },
        mounted(){
            if (this.periodList==null) {
                this.getPeriod();
            }
            if (this.empschoolMap == null) {
                this.fillSchoolEmps();
            }
            if (this.schoolList == null) {
                this.getAllSchool();
            }
            this.initData();

        },
        created() {
            this.initData();
        },
        methods: {
            ...mapActions(['getPeriod', 'setEmpschool', 'deleteEmpschool', 'fillSchoolEmps', 'getAllSchool']),
            dateFormat: function (row, column) {
                var date = row[column.property];
                if (date == undefined) {
                    return "";
                }
                return moment(date).format("YYYY-MM-DD");
            },
            schoolchange(schoolid) {
                var v = this.empschoolMap;
                var list = v[schoolid];
                this.empsList = [];
                if (list != null) {
                    list.forEach(item => {
                        this.empsList.push(item);
                    });
                }
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.formData.pageno = val;
                this.offset = (val - 1) * this.limit;
            },
            async deleteCharge(a, row) {
                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.confirmdelete(row);
                });
            },
            async confirmdelete(row) {
                var data = {"data": {"id": row.id}}
                await deleteOtherCharge(data)
                this.initData();
                this.$message({
                    type: 'success',
                    message: '删除成功'
                });
            },

            print(index,row){
                var chargefee={};
                chargefee.schoolname=row.schoolname;
                chargefee.ename=row.ename;
                chargefee.comments=row.comments;
                chargefee.chargedate=moment().format('YYYY-MM-DD');
                chargefee.orderid=row.orderid;
                chargefee.charge=row.charge;
                chargefee.otherCharge=row.otherCharge;
                chargefee.wayTypename=row.wayTypename;
                chargefee.balanceItemname=row.balanceItemname;
                chargefee.balanceTypename=row.balanceTypename;
                this.$router.push({name: '/otherChargeprint', params: {chargefee: chargefee}});
            },



            async initData() {
                const res = await queryOtherCharge({data:this.formData});
                if(res.success==true) {
                    this.tableData = [];
                    const chargelist=res.data.values;
                    this.count=res.data.totalCount;
                    chargelist.forEach(item => {
                        const tableData = {};
                        tableData.id=item.id;
                        tableData.orderid = item.orderid;
                        tableData.balanceItemname = item.balanceItemname;
                        tableData.comments = item.comments;
                        tableData.schoolname = item.comments;
                        tableData.ename=item.ename;
                        tableData.charge = item.charge;
                        tableData.balanceTypename = item.balanceTypename;
                        tableData.chargeTypename = item.chargeTypename;
                        tableData.createtime = item.createtime;
                        tableData.wayTypename=item.wayTypename;


                        this.tableData.push(tableData);
                    })
                }
            }
        },
    }
</script>

<style lang="less">
    @import '../style/mixin';

    .table_container {
        padding: 20px;
    }
    .el-form-item {
        margin-bottom: 5px;
    }
</style>
